<style>
    .fix-wrap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }

    .top-fix {
        position: absolute;
        height: 73px;
        top: 10px;
        right: 10px;
        left: 10px;
    }

    .bot-fix {
        position: absolute;
        bottom: 10px;
        top: 98px;
        left: 10px;
        right: 10px;
    }

    .bot-fix .layui-table-view {
        margin: 0;
    }
</style>
<div class="fix-wrap">
    <div class="top-fix">
        <div id="list_form" class="layui-form sm-operation">
            <blockquote class="site-text layui-elem-quote">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">菜单名称：</label>
                        <div class="layui-input-inline">
                            <input name="menuName" type="text" autocomplete="off" placeholder="角色名称"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">状态：</label>
                        <div class="layui-input-inline">
                            <select name="status">
                                <option value="">全部</option>
                                <option value="0">启用</option>
                                <option value="1">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="query" class="layui-btn"><i class="iconfont icon-sousuo"></i>查询</button>
                    </div>
                </div>
            </blockquote>
        </div>
    </div>
    <div class="bot-fix">
        <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
    </div>
</div>
<script>
    layui.use(['treeGrid', 'form'], function () {
        var $ = layui.jquery;
        var treeGrid = layui.treeGrid;
        var form = layui.form;
        var tableId = 'treeTable';
        form.render();
        treeGridInit();

        $('#query').on('click', function () {
            treeGrid.query(tableId, {
                where: smartAui.getFormData("list_form")
            });
            smartAui.getFormData("list_form");
        });

        function treeGridInit() {
            treeGrid.render({
                id: tableId
                , elem: '#' + tableId
                , method: "get"
                , idField: 'id'
                , url: '/sys/menu/list'
                , cellMinWidth: 100
                , treeId: 'menuId'//树形id字段名称
                , treeUpId: 'parentId'//树形父id字段名称
                , treeShowName: 'menuName'//以树形式显示的字段
                , cols: [[
                    {type: 'numbers', title: "序号", width: 50}
                    , {field: 'menuName', title: '菜单名称', width: 200, align: 'center'}
                    , {
                        field: 'menuType', title: '菜单类型', width: 90, templet: function (d) {
                            return d.menuType == 1 ? '菜单' : '功能'
                        }, unmenuize: true, align: 'center'
                    }
                    , {
                        field: 'url', title: '菜单URL', width: 220, templet: function (d) {
                            return d.url ? d.url : '#'
                        }, align: 'center'
                    }
                    , {field: 'orderNum', title: '排序', width: 70, align: 'center'}
                    , {
                        field: 'leafFlag', title: '叶子节点', width: 90, templet: function (d) {
                            return d.leafFlag == 0 ? '否' : '是'
                        }, align: 'center'
                    }
                    , {
                        field: 'status', title: '状态', width: 70, templet: function (d) {
                            return d.status == 1 ? '<span class="font-danger">禁用</span>' : '<span class="font-success">启用</span>'
                        }, align: 'center'
                    }
                    , {field: 'createTime', title: '添加时间', width: 170, align: 'center'}
                    , {
                        field: 'lock', title: '操作', width: 200, templet: function (d) {
                            return d.systemFlag == '1'
                                ? '<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add">添加</button>'
                            + '<button class="layui-btn layui-btn-sm layui-btn-disabled" disabled="disabled">修改</button>'
                            + '<button class="layui-btn layui-btn-sm layui-btn-disabled" disabled="disabled">删除</button>'
                                : '<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add">添加</button>'
                            + '<button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="edit">修改</button>'
                            + '<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>';
                        }, unmenuize: true, align: 'center'
                    }
                ]]
                , page: false
            });
        }

        treeGrid.on('tool(' + tableId + ')', function (obj) {
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'add') {
                smartAui.dialog({
                    title: '添加',
                    template: 'add',
                    saveUrl: '/sys/menu/save',
                    width: 600,
                    height: 600,
                    htmlData: data,
                    submited: function () {
                        treeGrid.reload(tableId);
                    }
                });
            } else if (layEvent === 'edit') {
                smartAui.dialog({
                    title: '修改'
                    , template: 'edit'
                    , saveUrl: '/sys/menu/update'
                    , width: 500
                    , height: 600
                    , htmlData: data
                    , submited: function () {
                        treeGrid.reload(tableId);
                    }
                })
            } else if (layEvent === 'delete') {
                //判断是否是叶子节点
                if (data.leafFlag == 0) {
                    layer.msg("请先删除子菜单");
                    return;
                }
                var obj = {"menuId": data.menuId, "parentId": data.parentId};
                smartAui.confirm('确认删除？', function () {
                    $.ajax({
                        type: "post",
                        url: '/sys/menu/delete',
                        data: obj,
                        success: function (result) {
                            layer.msg(result.msg);
                            if (result.success) {
                                treeGrid.reload(tableId);
                            }
                        }
                    })
                }, 0);
            }
        });
    })
</script>